<template>
  <view>
    <view 
      class="bill-month-group" 
      v-for="(monthGroup, idx) in rechargeData" 
      :key="idx"
    >
      <view class="bill-month-header">
        <text class="month">{{ monthGroup.month }}</text>
        <text class="summary">
          总充值: ¥{{ monthGroup.totalRecharge }}
        </text>
      </view>

      <view 
        class="bill-item" 
        v-for="(item, i) in monthGroup.items" 
        :key="i"
      >
        <image class="bill-icon" :src="item.icon" />
        <view class="bill-info">
          <view class="bill-title">{{ item.title }}</view>
          <view class="bill-date">{{ item.date }}</view>
        </view>
        <view class="bill-amount in">
          ¥{{ item.amount }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue';
import { getRechargeTransactions } from '../../../utils/api';

const rechargeData = ref([
  {
    month: '十月',
    totalRecharge: '700.00',
    items: [
      {
        icon: '/static/wechat.png',
        title: '微信充值',
        date: '2023-10-01 10:20:30',
        amount: '500.00',
      },
      {
        icon: '/static/alipay.png',
        title: '支付宝充值',
        date: '2023-10-10 15:00:00',
        amount: '200.00',
      },
    ],
  },
  {
    month: '九月',
    totalRecharge: '300.00',
    items: [
      {
        icon: '/static/wechat.png',
        title: '微信充值',
        date: '2023-09-20 11:11:11',
        amount: '300.00',
      },
    ],
  },
])

// 获取数据
onMounted(()=>{
	getRechargeTransactions().then(res=>{
		// 构造合适的数据
		// 加入到rechargeData中
		rechargeData.value.push(res)
	})
})
</script>
<style src="./all.css"></style> 